<template>
  <div>
    <BannerPc />
    <div class="data-statistics pd40">
      <div class="w1200">
        <div class="public-title">{{ $t("数据统计") }}</div>

        <DataStatistics />
      </div>
    </div>
    <div class="sercice-list pd40">
      <div class="public-title">{{ $t("服务列表") }}</div>
      <div class="w1200">
        <div class="list">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, key) in serviceList" :key="key">
              <div class="item" @click="goService(key)">{{ $t(key) }}</div>
            </el-col>
          </el-row>
        </div>
        <div class="more" @click="$router.push('/service')">
          {{ $t("更多") }}>
        </div>
      </div>
    </div>
    <div class="new-sercice pd40">
      <div class="public-title">{{ $t("最新服务") }}</div>
      <div class="w1200">
        <div class="list">
          <el-row :gutter="40">
            <el-col
              :span="12"
              v-for="(item, key) in recentServiceList"
              :key="key"
            >
              <div
                class="item"
                @click="
                  $router.push({
                    path: '/service',
                    query: { parents: item.parent, serviceId: item.serviceId },
                  })
                "
              >
                <div class="l">
                  <div class="t1">{{ item.serviceId }}</div>
                  <div class="t2">{{ $t(item.serviceName) }}</div>
                </div>
                <div class="r">
                  <div class="b b1">{{ $t("积分") }} {{ item.price }}</div>
                  <div class="b b2">{{ item.time }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apiService from "@/api/apiService";
import { isMobile } from "@/utils";
import BannerPc from "./components/bannerPc.vue";
import DataStatistics from "@/components/home/DataStatistics.vue";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "ServicePc",
  data() {
    return {
      allSerciveList: [],
      serviceList: [],
    };
  },
  components: {
    BannerPc,
    DataStatistics,
  },
  watch: {},
  computed: {
    mobile() {
      return isMobile();
    },
    recentServiceList() {
      let list = [];
      if (this.allSerciveList.length) {
        list = this.allSerciveList.slice(0, 4);
      }
      return list;
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      apiService.get("/all-service", {}).then((res) => {
        this.allSerciveList = res.data;
        this.serviceList = this.groupedByParent(res.data);
      });
    },
    groupedByParent(list) {
      return list.reduce((acc, item) => {
        const key = item.parent;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(item);
        return acc;
      }, {});
    },
    // eslint-disable-next-line no-unused-vars
    goService(parents = "", serviceId = "") {
      this.$router.push({ path: "/service", query: { parents } });
    },
  },
};
</script>

<style lang="scss" scoped>
.data-statistics {
  background-color: #fff;
}

.sercice-list {
  background-image: url("@/assets/images/home_server_bg_02.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  .list {
    padding-top: 40px;

    .item {
      background-color: #fff;
      color: #333;
      font-size: 16px;
      text-align: center;
      margin-bottom: 20px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.6s;

      &:hover {
        color: #fff;
        background-color: #5288e8;
      }
    }
  }

  .more {
    width: 100px;
    margin: 0px auto;
    font-size: 16px;
    color: #666;
    text-align: center;
    cursor: pointer;
  }
}

.new-sercice {
  background-color: #fff;

  .list {
    padding-top: 30px;

    .item {
      background-color: #f6f9fe;
      height: 110px;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 20px;
      cursor: pointer;

      .l {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        font-size: 18px;

        .t1 {
          color: #5288e8;
        }

        .t2 {
          color: #666666;
          margin-top: 10px;
        }
      }

      .r {
        display: flex;
        align-items: center;

        .b {
          width: 100px;
          height: 36px;
          border-radius: 12px;
          font-size: 16px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;

          &.b1 {
            background-color: #fe5858;
          }

          &.b2 {
            background-color: #51c28f;
            margin-left: 20px;
          }
        }
      }
    }
  }
}

.public-title {
  color: #333;
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}

.pd40 {
  padding: 40px 0;
}
</style>
